<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.b1{
				width: 100px;
				height: 100px;
				background-color: green;
			}
			
			.b2{
				/*width: 200px;*/
				height: 200px;
				background-color:pink;
			}
		</style>
		
		
		<script type="text/javascript">
			window.onload = function(){
				var box = document.getElementById("box");
				
				var btn01 = document.getElementById("btn01");
				
				btn01.onclick = function(){
					//box.className += " b2";
					//addClass(box , "b2");
					//remove(box , "b2");
					toggleClass(box , "b2");
				};
			};	
				//定义一个函数，用来向一个元素添加指定的class属性值
				/*
				 * 有两个参数，obj代表要添加的class属性的元素
				 * cn 要添加的class值
				 */
				function addClass(obj , cn){
					//如果没有才添加
					if(!hasClass(obj , cn)){
						obj.className += " "+cn;
					}
					
				}
				
				/*
				 * 判断一个元素中是否含有指定的class属性值
				 * 如果有该class值，则返回true，没有返回false
				 * 
				 */
				function hasClass(obj , cn){
					//判断obj中有没有cn class
					//创建一个正则表达式
					//var reg = /\bb2\b/;
					//创建一个构造函数
					var reg = new RegExp("\\b" + cn + "\\b");
					return reg.test(obj.className);
					
				}
				
				function removeClass(obj , cn){
					var reg = new RegExp("\\b" + cn + "\\b");
					obj.className = obj.className.replace(reg,"");
				}
				
				function toggleClass(obj , cn){
					if(hasClass(obj , cn)){
						removeClass(obj , cn);
					}else{
						addClass(obj , cn);
					}
				}
			
		</script>
	</head>
	<body>
		<button id = "btn01">点击按钮以后修改box的样式</button>
		
		<br /><br />
		
		<div id="box" class="b1 b2"></div>
	</body>
</html>
